<template>
  <div class="comment-item" v-if="props.info">
    <t-avatar size="56px" :image="$filters.getLinkUrl(userStore.userInfo.info.coverUrl, webUrls2)"> </t-avatar>
    <div class="item-right hw-box-style-flex hw-box-style-flex-clm">
      <span class="right-name">{{ userStore.userInfo.info.name }}</span>
      <span class="right-content">{{ props.info.content }}</span>

      <div class="exbit-box">
        <img :src="$filters.getLinkUrl(props.info.coverUrl, webUrls)" alt="" class="exbit-box-left" />
        <div class="exbit-box-right">
          <div>
            <span class="exbit-title1">{{ props.tabValue === 1 ? '展品' : '项目' }}</span>
            <span class="exbit-title2">
              <a
                :href="
                  props.tabValue === 1
                    ? doorUrl + `portal/visitExhibitsInfo?showpieceid=${props.info.refId}`
                    : doorUrl + `${projackUrl}?projectId=${props.info.refId}`
                "
                target="_blank"
                >#{{ props.info.name }}#</a
              >
            </span>
          </div>
        </div>
      </div>
      <div style="margin: 16px 0" class="hw-box-style-flex hw-box-style-flex-between" v-if="!props.BottomSlot">
        <span class="right-time">{{ props.info.createDate }}</span>
        <div>
          <span class="right-btn-title hw-click-cursor" @click="deletereply">删除</span>
        </div>
      </div>
      <div class="reply-box" v-if="props.info.replyContent">
        <span class="reply-title">{{ props.info.replyContent }}</span>
        <span class="reply-title1">{{ props.info.replyDate }}</span>
      </div>
    </div>
    <messageModel
      submitText="删除"
      title="提示"
      :visible="visible1"
      problem="确定删除吗？"
      @closeClick="closeClick"
      @submitClick="submitClick"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { doorUrl } from '@/utils/minxin';
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { commentReply, delComment, approvedComment, rejectedComment } from '@/api/comment/comment';
import { useSettingStore, useUserStore } from '@/store';
import { configData } from '@/api/templates/templates';

import messageModel from '@/components/messageModel/index.vue';

const visible1 = ref(false);
const webUrls: string = '?imageView2/1/w/72/h/72/format/webp';
const webUrls2: string = '?imageView2/1/w/56/h/56/format/webp';
const userStore = useUserStore();
const projackUrl = ref('');
const preview = () => {
  // console.log('shuaxin');
  configData(localStorage.getItem('projectId')).then((res) => {
    if (res.statusCode == 200) {
      projackUrl.value = pathSquare(res.data.id);
    }
  });
};
preview();
const pathSquare = (e: number) => {
  // router.push('/template/templateMould/templateItem2');
  let url: string = '';
  switch (e) {
    case 395740859879493:
      url = 'templateMould/wylx/home';
      return url;
      break;
    case 395741054230597:
      url = 'templateItem2/home';
      return url;
      break;
    case 410276243316805:
      url = 'levelling/home';
      return url;
      break;
    case 410276336631877:
      url = 'calligraphy';
      return url;
      break;
    case 420838252666949: //模板五
      url = 'timeAxis/timeAxisHome';
      return url;
      break;
    case 420838403928133: //模板6
      url = 'templateItem6/home';
      return url;
      break;
    case 420838478893125: //模板7
      url = 'Biography/home/homeInfo';
      return url;
      break;
    default:
      break;
  }
};
const props = defineProps({
  info: {
    type: Object,
  },
  auditStatus: {
    type: Number,
  },
  BottomSlot: {
    type: Boolean,
    defult: false,
  },
  tabValue: {
    type: Number,
  },
});
const emit = defineEmits(['replySuccess']);
const loading = ref(false);
const show = ref(true);
const value = ref('');

const reply = async () => {
  //回复
  try {
    if (!value.value && !loading.value) {
      MessagePlugin.error('请输入评论内容');
      return;
    }
    loading.value = true;
    let parmas = {
      value: props.info.id,
      text: value.value,
    };
    let { data } = await commentReply(parmas);
    if (statusCode == 200) {
      show.value = !show.value;
      MessagePlugin.success('回复成功');
      emit('replySuccess', parmas);
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const closeClick = () => {
  visible1.value = false;
};

const deletereply = async () => {
  visible1.value = true;
};
const submitClick = async () => {
  //删除评论
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let { data } = await delComment(props.info.id);
    if (data) {
      MessagePlugin.success('删除成功');
      emit('replySuccess');
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const passReply = async () => {
  //通过审核
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let { statusCode } = await approvedComment(props.info.id);
    if (statusCode == 200) {
      MessagePlugin.success('审核通过');
      emit('replySuccess');
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped>
.comment-item {
  margin-bottom: 30px;
  display: flex;
  width: 100%;
  padding: 16px;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.item-right {
  flex: 1;
  margin-left: 12px;
}
.right-name {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 18px;
  margin-bottom: 8px;
}
.right-content {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  margin-bottom: 15px;
}
.right-time {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}
.right-btn-title {
  text-align: right;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(210, 173, 119, 0.9);
  line-height: 22px;
  margin-left: @margin-hw-item2;
}
.right-btn-title1 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e34d59;
  line-height: 22px;
  margin-left: @margin-hw-item2;
  text-decoration: underline;
}
.right-btn-title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #dcdcdc;
  line-height: 22px;
  margin-left: @margin-hw-item2;
  text-decoration: underline;
}
.edit-box {
  margin-top: 18px;
}
.hw-box-end-box {
  margin-top: 8px;
}
.hw-flex-style-b-c {
  padding: 12px 16px;
  background: #fbf8f2;
  border-radius: 4px;
  margin-top: 18px;
}
.exbit-box {
  display: flex;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.exbit-box-left {
  width: 72px;
  height: 72px;
  background: #d8d8d8;
  margin-right: 16px;
}
.exbit-box-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}
.exbit-title1 {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: rgba(0, 0, 0, 0.9);
}
.exbit-title2 {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  color: rgba(210, 173, 119, 0.9);
}
.exbit-title3 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 22px;
  margin-top: 8px;
  //超出一行省略号
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.reply-box {
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.reply-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
}
.reply-title1 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
  margin-top: 11px;
}
</style>
